<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 使用对象或map实现把扁平数组转成树型数组的函数
        function transListToTreeData(list, rootValue) {
            // 1. 得到一个对象： {pid值: [子数据1, 子数据2]}
            // {
            //     0: [{ id: 1, name: '总裁办', pid: 0 }, { id: 2, name: 'IT部', pid: 0 }],
            //     1: [{ id: 11, name: '秘书处', pid: 1 }]
            // }
            const map  = new Map()
            list.forEach(item => {
                if(map.has(item.pid)){              // map[0]            
                    map.get(item.pid).push(item)    // // map[0].push({id: 2, name: 'IT部', pid: 0})
                }else {
                    map.set(item.pid, [item] )
                }
            });
            // console.log(map)

            // map = {}
            // 第一次循环
            // map  {0: [ {id: 1, name: '总裁办', pid: 0}]}
            // 第二次循环
            // map  {0: [ {id: 1, name: '总裁办', pid: 0}], 1: [{id: 11, name: '秘书处', pid: 1}]  }
            // 第三次循环
            // map  {0: [ {id: 1, name: '总裁办', pid: 0}, {id: 2, name: 'IT部', pid: 0}], 1: [{id: 11, name: '秘书处', pid: 1}]  }


            // 2. 对原数组进行修改, 有孩子就加children属性，没有孩子就不用加
            //    遍历处理数组中的每一个元素
            //    去上面的对象中找当前遍历到的元素的id属性值对应的属性，作为当前元素的children属性

            // map
            // {
            //     0: [{ id: 1, name: '总裁办', pid: 0 }, { id: 2, name: 'IT部', pid: 0 }],
            //     1: [{ id: 11, name: '秘书处', pid: 1 }]
            // }
            list.forEach((item)=> {
                const children = map.get(item.id)
                if(children){
                    item.children = children
                }
            })

            // [
            //     { id: 1, name: '总裁办', pid: 0, children: [{ id: 11, name: '秘书处', pid: 1 }] },
            //     { id: 11, name: '秘书处', pid: 1 },
            //     { id: 2, name: 'IT部', pid: 0 }
            // ]


            // 3. 对原数组进行过滤，保留pid===rootValue的元素，返回
            // [
            //     { id: 1, name: '总裁办', pid: 0, children: [{ id: 11, name: '秘书处', pid: 1 }] },
            //     { id: 2, name: 'IT部', pid: 0 }
            // ]
            return list.filter(item => item.pid === rootValue)
        }

        // 测试代码：
        var arr = [
            {id: 1, name: '总裁办', pid: 0},
            {id: 11, name: '秘书处', pid: 1},
            {id: 2, name: 'IT部', pid: 0}
        ]

        let result = transListToTreeData(arr, 0)
        console.log(result);

        // [
        //     {id: 1, name: '总裁办', pid: 0, children: [{id: 11, name: '秘书处', pid: 1}]},
        //     {id: 2, name: 'IT部', pid: 0}
        // ]
    </script>
</body>

</html>